Quiero cambiar el color del cuerpo, el color de la fuente y el color del enlace con funciones en JS.
function bodyBackgroundColor(color){ var target = document.querySelector('body') target.style.backgroundColor=color } function bodyColor(color){ var target = document.querySelector('body') target.style.color=color } function linkColor(color){ var link = document.querySelectorAll('a') var i = 0 while (i<link.length) { link[i].style.color=color i = i+1 } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Night MOde Final</title> <link rel="stylesheet" href="final_night.css"> <script src="final_night.js"></script> </head> <body> <h1> <a href="qwer"> WEB </a> </h1> <ol> <li> <a href="asdf"> HTML </a> </li> <li> <a href="zxcv"> CSS </a> </li> <li> <a href="uiop"> JavaScript </a> </li> </ol> <h2> Nightmode </h2> <p> Night mode making again... </p> <input type="button" value="NIGHT" onclick=" if (this.value === 'NIGHT') { bodyBackgroundColor('black') bodyColor('powderblue') linkColor('powderblue') this.value='DAY' } else { bodyBackgroundColor('white') bodyColor('navy') linkColor('navy') this.value ='NIGHT' } "> </body> </html>Pero descubrí que la función linkColor no funciona y los detalles del error son que "linkColor no es una función".
Traté de verificar la función linkColor con la consola de Chrome y verifiqué que solo escribir linkColor ('rojo') o ('azul') funciona bien.
Entonces, creo que se produce un error cuando la función linkColor está en la declaración condicional en el documento html, pero aún no puedo entender qué es lo que está mal.
¿Alguien sabe cómo arreglar esto?
No se recomienda utilizar JS en línea. Debe usar addEventListener para agregar un oyente en el elemento HTML.
Pero también puede obtener la referencia del botón usando querySelector y agregarle EventListener
function bodyBackgroundColor(color) { var target = document.querySelector('body') target.style.backgroundColor = color } function bodyColor(color) { var target = document.querySelector('body') target.style.color = color } function linkColor(color) { var link = document.querySelectorAll('a') var i = 0 while (i < link.length) { link[i].style.color = color i = i + 1 } } const button = document.querySelector("button"); button.addEventListener("click", function() { if (this.value === 'NIGHT') { bodyBackgroundColor('black') bodyColor('powderblue') linkColor('powderblue') this.value = 'DAY' } else { bodyBackgroundColor('white') bodyColor('navy') linkColor('navy') this.value = 'NIGHT' } }) <div class="wrapper"> <h1> <a href="qwer"> WEB </a> </h1> <ol> <li> <a href="asdf"> HTML </a> </li> <li> <a href="zxcv"> CSS </a> </li> <li> <a href="uiop"> JavaScript </a> </li> </ol> <h2> Nightmode </h2> <p> Night mode making again... </p> <button type="button" value="NIGHT"> change theme</button>